<!-- 控制台主页面 -->
<template>
    <div id="dashboard">
        <navbar :show="true"></navbar>
        <sidebar :show="sidebar.opened && !sidebar.hidden"></sidebar>
        <app-main></app-main>
        <footer-bar></footer-bar>
    </div>
</template>
 
<script>
import Navbar from '@/components/layout/Navbar';
import Sidebar from '@/components/layout/Sidebar'
import AppMain from '@/components/layout/AppMain'
import FooterBar from '@/components/layout/FooterBar'
// import { Navbar, Sidebar } from '@/components/layout'
import { mapGetters, mapActions } from 'vuex'

export default {
    components: {
        Navbar,
        Sidebar,
        AppMain,
        FooterBar
    },
    beforeMount() {
        const { body } = document
        const WIDTH = 768
        const RATIO = 3
        const handler = () => {
            if (!document.hidden) {
                let rect = body.getBoundingClientRect()
                let isMobile = rect.width - RATIO < WIDTH
                this.toggleDevice(isMobile ? 'mobile' : 'other')
                this.toggleSidebar(!isMobile)
            }
        }
        document.addEventListener('visibilitychange', handler)
        window.addEventListener('DOMContentLoaded', handler)
        window.addEventListener('resize', handler)
    },
    created(){
        // this.$router.push({ path: '/dashboard' });
    },
    computed: mapGetters({
        sidebar: 'sidebar'
    }),
    methods: mapActions([
        'toggleDevice',
        'toggleSidebar'
    ])
}
</script>

<style lang="scss">
@import '~animate.css';
.animated {
    animation-duration: .377s;
}

@import '~bulma';

@import '~wysiwyg.css/wysiwyg.sass';
$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome';
html {
    background-color: whitesmoke;
}

.nprogress-container {
    position: fixed !important;
    width: 100%;
    height: 50px;
    z-index: 2048;
    pointer-events: none;
    #nprogress {
        $color: #48e79a;
        .bar {
            background: $color;
        }
        .peg {
            box-shadow: 0 0 10px $color, 0 0 5px $color;
        }
        .spinner-icon {
            border-top-color: $color;
            border-left-color: $color;
        }
    }
}
</style>